<template>
  <div class="subPage">
    <nav-bar
      :title="navTitle" 
      position="center" 
      color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)' 
      :rowColor="'white'" 
      :goBack="goBack" 
      :isMsg='false' 
      fontColor='#fff' ></nav-bar>
    <scroll-view 
    :scroll-y="true"  
    :show-scrollbar="false"
    v-if="historyVideo.length>0"
    class="flexContent"
    :refresher-triggered="triggered" 
    :refresher-enabled="enabled" 
    @refresherrefresh="gethistoryVideo"
    @scrolltolower="onReachBottom"
    :scroll-with-animation='true'
    >
      <div class="historyVideoListBox">
        <ul>
          <li v-for="item in historyVideo" :key="item.video_type" @click="clickFile(item)" >
            <div class="videoTopicImg">
              <img :src="item.picture" :alt="item.title">
              <span class="tips" :style="{background:item.file_type.color}">{{item.file_type.name}}</span>
              <span class="playBtn"  v-if="item.file_type.color!=='#3CDFF5'" >
                <img src="/static/images/video_play.png" alt="">
              </span>
            </div>
            <div class="desc">{{item.title}}</div>
          </li>
        </ul>
      </div>
    </scroll-view>
    <div v-else class="noDataImg">
      <img :src="noDataImg"/>
    </div>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>
<script>
import api from "@/api/api";
import storage from "@/utils/storage";
import navBar from '@/components/navBar'
import { mapState } from 'vuex'
const { $Toast, $Message } = require("../../../../../static/iview/base/index");
export default {
  components: {
    navBar
  },
  computed: {
    ...mapState([
      'ifIphonex'
    ])
  },
  data() {
    return {
      navTitle: '历史直播',
      triggered: false,
      enabled:true,
      historyVideo: [],
      noDataImg: ""
    };
  },
  onLoad(options) {
    Object.assign(this.$data, {})
    this.gethistoryVideo()
    this.imgUrl = api.imgUrl;
    this.noDataImg = this.imgUrl + 'noData.png'
  },
  onShow() {
  },
  onUnload() {},
  methods: {
    // 判断文件类型
    notifyFileType(url) {
      let arr = url.split('.')
      if(arr[arr.length-1] == "mp4") {
        return {name:'视频', color: '#3CE48F'}
      } else if (arr[arr.length-1] == "mp3") {
        return {name:'音频', color: '#FF7B7B'}
      } else {
        return {name:'文件', color: '#3CDFF5'}
      }
    },
    // 历史直播列表
    gethistoryVideo() {
      this.triggered = true
      let param = {
        video_type: '7',
        type_id: '-1',
        patient: '1'
      }
      this.$api.videoTypeDeptSearch(param,{'showLoading': true}).then(res=>{
        this.triggered = false
        this.historyVideo = res.data
        this.historyVideo.forEach((ele,i)=>{
          this.historyVideo[i].file_type = this.notifyFileType(ele.video)
        })
        if(this.historyVideo.length > 0) {
          wx.showToast({
            title: '刷新成功',
            icon: 'none',
            duration: 1000
          })
        }
      })
    },
    // 点击内容
    clickFile(item) {
      if(item.file_type.name == '文件') {
        this.viewFile(item.video)
      } else {
        this.$router.push(`/pages/subPage/liveVideoArea/videoPlayRoom/main?type=${item.file_type.name}&src=${item.video}`)
      }
    },
    // 打开文件
    viewFile(url) {
      wx.showLoading({
        title: "加载中...",
        mask: true
      });
      let arr = url.split('.');
      if(arr[arr.length-1]=='jpg'||arr[arr.length-1]=='png'||arr[arr.length-1]=='gif') {
        mpvue.previewImage({
          current: url, // 当前显示图片的http链接
          urls: [url] // 需要预览的图片http链接列表
        })
        wx.hideLoading()
        return
      }
      wx.downloadFile({
        url: url,
        success: function (res) {
          const filePath = res.tempFilePath
          wx.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log('打开文档成功')
              wx.hideLoading()
            }
          })
        }
      })
    },
    // 下拉获取更多
    onReachBottom() {
      wx.showToast({
        title: '没有更多记录了',
        icon: 'none',
        duration: 1000
      })
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped lang="less">
.subPage {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.flexContent {
  flex: 1;
  overflow-y: scroll;
  padding-bottom: 40rpx;
}
.historyVideoListBox {
  width: 100%;
  margin-bottom: 34rpx;
  padding: 0 18rpx;
  box-sizing: border-box;
  ul{
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      margin-top: 31rpx;
      height: 204rpx;
      // width: 214rpx;
      width: 33.33%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .videoTopicImg {
        position: relative;
        margin-bottom: 10rpx;
        border-radius: 6rpx;
        overflow: hidden;
        img {
          width: 213rpx;
          height: 148rpx;
          border-radius: 6rpx;
        }
        .tips {
          height: 41rpx;
          width: 74rpx;
          line-height: 41rpx;
          text-align: center;
          left: 0;
          top: 0;
          position: absolute;
          color: #fff;
          font-size: 22rpx;
          // background-color:#3CE48F;
          border-radius: 0 0 22rpx 0;
        }
        .playBtn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          img {
            height: 65rpx;
            width: 65rpx;
          }
        }
      }
      .desc {
        font-size: 30rpx;
        height: 35rpx;
        line-height: 35rpx;
        width: 210rpx;
        display: block;
        text-align: center;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.noDataImg {
  flex: 1;
}
</style>
